<template>
    <div class="content">
        <div class="tar m-b10">
            <Button type="primary" @click="add">添加</Button>
        </div>
        <Table ref="selection" :columns="columns4" :data="list"></Table>
        <Page :total="info" show-elevator :page-size="pageSize" show-total  @on-change="changepage" />

        <Modal v-model="modal1" title="添加教程" width='40%' @on-ok="addjc">
            <Form :label-width="100" :model="addForm"  ref="addUserForm" :rules="rules">
                <FormItem label="语言选择">
                    <Select placeholder="请选择语言" class="w-50" v-model="addForm.languageId">
                      <Option value="1">中文</Option>
                      <Option value="2">英文</Option>
                    </Select>
                </FormItem>
                <FormItem label="教程名称" prop='title'>
                    <Input class="w-50" v-model="addForm.title" placeholder="请输入教程名称" />
                </FormItem>
                <FormItem label="链接">
                    <Input type="text" class="w-50" v-model="targetUrl" placeholder="请输入图片链接" />
                </FormItem>
                <FormItem label="建议图片尺寸">
                    宽：750px  高：400px
                </FormItem>
                <FormItem label="图片格式">
                    jpg、gif、png
                </FormItem>
                <FormItem label="图片大小">
                    不超过10mb
                </FormItem>
                <template>
                    <Upload
                        multiple
                        type="drag"
                        action="https://admin.catchon.vip/admin/operating/uploadpicture"
                        :headers='myHeaders'
                        :on-success='handleSuccess'
                        name="imgUrl">
                        <div style="padding: 20px 0">
                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                            <p>上传图片</p>
                        </div>
                    </Upload>
                </template>
                 <FormItem label="内容" prop="content">
                    <quill-editor
                      v-model="addForm.content"
                      ref="myQuillEditor"
                      :options="editorOption"
                      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                      @change="onEditorChange($event)">
                    </quill-editor>
                </FormItem>
            </Form>
        </Modal>

        <Modal v-model="modal3" title="修改教程" width='40%' @on-ok="emitjc">
            <Form :label-width="100" :model="editForm"  ref="addUserForm" :rules="rules1">
                <FormItem label="语言选择">
                    <Select placeholder="请选择语言" class="w-50" v-model="editForm.languageId">
                      <Option value="1">中文</Option>
                      <Option value="2">英文</Option>
                    </Select>
                </FormItem>
                <FormItem label="教程名称" prop='title'>
                    <Input class="w-50" v-model="editForm.title" placeholder="请输入教程名称" />
                </FormItem>
                 <FormItem label="链接">
                    <Input type="text" class="w-50" v-model="targetUrl1" placeholder="请输入图片链接" />
                </FormItem>
                <FormItem label="教程图片">
                    <img :src="imgUrl" preview="1">
                </FormItem>
                <template>
                    <Upload
                        multiple
                        type="drag"
                        action="https://admin.catchon.vip/admin/operating/uploadpicture"
                        :headers='myHeaders'
                        :on-success='handleSuccess'
                        name="imgUrl">
                        <div style="padding: 20px 0">
                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                            <p>上传图片</p>
                        </div>
                    </Upload>
                </template>
                 <FormItem label="内容" prop="content">
                    <quill-editor
                      v-model="editForm.content"
                      ref="myQuillEditor"
                      :options="editorOption"
                      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                      @change="onEditorChange($event)">
                    </quill-editor>
                </FormItem>
            </Form>
        </Modal>

        <Modal v-model="modal2" title="教程详情" width='40%' v-if="falg">
                <h1>{{ list[index].title }}</h1>
                <img :src="list[index].imgUrl" alt="">
               <div v-html="list[index].content"></div>
        </Modal>
    </div>
</template>
<script>
let token = localStorage.getItem('mytoken')
export default {
  data () {
    return {
      myHeaders: { Authorization: 'bearer ' + token },
      list: [],
      id: '',
      imgUrl: '', // 上传图片地址
      targetUrl: '', // 链接
      targetUrl1: '', // 修改链接
      zxid: '',
      index: '',
      content: null,
      falg: false,
      // // 分页
      info: null, // 总条数
      page: 1, // 页数
      pageSize: 20, // 每页多少条
      editorOption: {},
      addForm: {
        languageId: '',
        title: '',
        content: ''
      },
      rules: {
        title: [{ required: true, message: '请输入教程名称', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },
      editForm: {
        languageId: '',
        title: '',
        content: ''
      },
      rules1: {
        title: [{ required: true, message: '请输入教程名称', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },
      modal1: false,
      modal2: false,
      modal3: false,
      columns4: [
        {
          title: '名称',
          key: 'title',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                  color: '#2d8cf0'
                },
                on: {
                  click: () => {
                    this.chakan(this.list[params.index].id, params.index)
                  }
                }
              },
              params.row.title
            )
          }
        },
        {
          title: '发布时间',
          key: 'createTime',
          sortable: true
        },
        {
          title: '链接',
          key: 'targetUrl'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.emit(this.list[params.index].id)
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(this.list[params.index].id)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ]
    }
  },

  methods: {
    // 添加教程
    add () {
      this.modal1 = true
    },
    addjc () {
      let token = localStorage.getItem('mytoken')
      let params = this.qs.stringify({
        typeId: 6,
        languageId: this.addForm.languageId,
        title: this.addForm.title,
        content: this.addForm.content,
        imgUrl: this.imgUrl,
        targetUrl: this.targetUrl
      })
      this.axios.post('operating/discover', params, {
        headers: {
          Authorization: 'bearer ' + token
        }
      }).then(res => {
        if (res.data.code == 8008) {
          this.$Message.info(res.data.message)
          this.getList()
          this.imgUrl = null
          this.targetUrl = null
          this.addForm.languageId = null
          this.addForm.title = null
          this.addForm.content = null
        } else if (res.data.code == 4004) {
          this.$Message.info(res.data.message)
        } else if (res.data.code == 5501) {
          this.$Message.info(res.data.message)
          localStorage.removeItem('mytoken')
          this.$router.push({name: 'login'})
        }
      })
    },
    // 修改教程
    emit (id) {
      let token = localStorage.getItem('mytoken')
      this.modal3 = true
      this.zxid = id
      this.axios.get('operating/discover/' + id, {
        headers: {
          Authorization: 'bearer ' + token
        }
      }).then(res => {
        // console.log(res)
        if (res.data.code == 8008) {
          this.editForm.languageId = res.data.data.discover.languageId
          this.editForm.title = res.data.data.discover.title
          this.editForm.content = res.data.data.discover.content
          this.targetUrl1 = res.data.data.discover.targetUrl
          this.imgUrl = res.data.data.discover.imgUrl
        } else if (res.data.code == 5501) {
          this.$Message.info(res.data.message)
          localStorage.removeItem('mytoken')
          this.$router.push({name: 'login'})
        }
      })
    },
    emitjc () {
      let token = localStorage.getItem('mytoken')
      let params = this.qs.stringify({
        typeId: 6,
        imgUrl: this.imgUrl,
        id: this.zxid,
        targetUrl: this.targetUrl1,
        languageId: this.editForm.languageId,
        title: this.editForm.title,
        content: this.editForm.content
      })
      // console.log(params)
      this.axios.put('operating/discover', params, {
        headers: {
          Authorization: 'bearer ' + token
        }
      }).then(res => {
        if (res.data.code == 8008) {
          this.$Message.info(res.data.message)
          this.getList()
        } else if (res.data.code == 4004) {
          this.$Message.info(res.data.message)
        } else if (res.data.code == 5501) {
          this.$Message.info(res.data.message)
          localStorage.removeItem('mytoken')
          this.$router.push({name: 'login'})
        }
      })
    },
    // 删除教程
    remove (id) {
      let token = localStorage.getItem('mytoken')
      this.axios.delete('operating/discover/' + id, {
        headers: {
          Authorization: 'bearer ' + token
        }
      }).then(res => {
        if (res.data.code == 8008) {
          this.$Message.info(res.data.message)
          this.getList()
        } else if (res.data.code == 4004) {
          this.$Message.info(res.data.message)
        } else if (res.data.code == 5501) {
          this.$Message.info(res.data.message)
          localStorage.removeItem('mytoken')
          this.$router.push({name: 'login'})
        }
      })
    },
    // 查看教程
    chakan (id, index) {
      this.index = index
      // console.log(this.index)
      this.id = id
      this.falg = true
      // console.log(this.id)
      this.modal2 = true
    },
    // 获取所有教程
    getList () {
      let token = localStorage.getItem('mytoken')
      let params = this.qs.stringify({
        typeId: 6,
        pn: this.page,
        pageSize: this.pageSize
      })
      this.axios.post('operating/discovers', params, {
        headers: {
          Authorization: 'bearer ' + token
        }
      }).then(res => {
        // console.log(res);
        if (res.data.code == 8008) {
          this.list = res.data.data.listDiscover
          this.info = res.data.data.integer
        } else if (res.data.code == 5501) {
          this.$Message.info(res.data.message)
          localStorage.removeItem('mytoken')
          this.$router.push({name: 'login'})
        }
      })
    },
    // 分页
    changepage (page) {
      this.page = page
      let token = localStorage.getItem('mytoken')
      let params = this.qs.stringify({
        typeId: 6,
        pn: page,
        pageSize: this.pageSize
      })
      // console.log(params)
      this.axios.post('operating/discovers', params, {
        headers: {
          Authorization: 'bearer ' + token
        }
      }).then(res => {
        if (res.data.code == 8008) {
          this.list = res.data.data.listDiscover
        } else if (res.data.code == 5501) {
          this.$Message.info(res.data.message)
          localStorage.removeItem('mytoken')
          this.$router.push({name: 'login'})
        }
      })
    },
    // 富文本编辑器
    onEditorBlur () {
      // 失去焦点事件
    },
    onEditorFocus () {
      // 获得焦点事件
    },
    onEditorChange () {
      // 内容改变事件
    },
    // 获取上传图片的地址
    handleSuccess (res, file) {
      // console.log(res);
      this.imgUrl = res.data.path
    }
  },
  created () {
    this.getList()
  },
  mounted () {
    this.$Message.config({
      top: 250
    })
  }
}
</script>
<style>
img {
  width: 15%;
  margin: 10px;
}
</style>
